<template>
  <div class="moments-main">
    <!-- 顶部工具栏 -->
    <div class="moments-toolbar">
      <div class="toolbar-right">
        <el-select v-model="currentStyle" placeholder="选择显示风格" style="width: 160px">
          <el-option label="简约现代" value="modern" />
          <el-option label="复古手账" value="vintage" />
          <el-option label="可爱拼贴" value="cute" />
        </el-select>
      </div>
    </div>

    <div class="moments-list" v-loading="loading">
      <!-- 空状态提示 -->
      <div v-if="!loading && moments.length === 0" class="empty-state">
        <el-empty description="暂无动态" />
      </div>

      <!-- 根据选择的风格渲染不同的组件 -->
      <template v-else>
        <ModernStyle
          v-if="currentStyle === 'modern'"
          :moments="moments"
          @edit="editMoment"
          @delete="handleDelete"
          @search-tag="searchByTag"
        />
        <VintageStyle
          v-else-if="currentStyle === 'vintage'"
          :moments="moments"
          @edit="editMoment"
          @delete="handleDelete"
          @search-tag="searchByTag"
        />
        <CuteStyle
          v-else-if="currentStyle === 'cute'"
          :moments="moments"
          @edit="editMoment"
          @delete="handleDelete"
          @search-tag="searchByTag"
        />
      </template>

      <div v-if="moments.length > 0" class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted, watch, type Ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { useMoments } from '../composables/useMoments'
import { MoodType, type MomentStyle } from '../types'
import ModernStyle from '../components/ModernStyle.vue'
import VintageStyle from '../components/VintageStyle.vue'
import CuteStyle from '../components/CuteStyle.vue'

const router = useRouter()
const {
  loading,
  moments,
  pagination,
  fetchMoments,
  deleteMoment,
  handlePageChange,
  handleSizeChange
} = useMoments()

// 从父组件注入数据
const filters = inject<any>('momentsFilters')
const currentStyle = inject<Ref<MomentStyle>>('momentsStyle', ref('modern'))
const searchTrigger = inject<() => void>('searchTrigger')

// 监听筛选条件变化并搜索
watch(() => [filters?.mood, filters?.tag, filters?.startDate, filters?.endDate], () => {
  if (searchTrigger) {
    handleSearch()
  }
}, { deep: true })

// 搜索
const handleSearch = () => {
  if (!filters) return

  pagination.page = 1
  const searchFilters = {
    mood: filters.mood as MoodType | undefined,
    tag: filters.tag,
    startDate: filters.startDate,
    endDate: filters.endDate
  }
  fetchMoments(searchFilters)
}

// 按标签搜索
const searchByTag = (tag: string) => {
  if (filters) {
    filters.tag = tag
    handleSearch()
  }
}

// 删除动态
const handleDelete = async (id: string) => {
  try {
    await ElMessageBox.confirm('确定要删除这条动态吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deleteMoment(id)
  } catch {
    // 用户取消删除
  }
}

// 编辑动态
const editMoment = (id: string) => {
  router.push(`/moments/edit/${id}`)
}

onMounted(() => {
  fetchMoments()
})
</script>

<style scoped>
.moments-main {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.moments-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #FFFFFF;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.moments-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.pagination-wrapper {
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .moments-toolbar {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .toolbar-right {
    width: 100%;
  }

  .toolbar-right :deep(.el-select) {
    width: 100% !important;
  }

  .moments-list {
    padding: 10px;
  }
}
</style>